<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  padding-bottom: 6.2rem;
  background-color: #f2f2f2;
  min-height: 100%;
  height: 100vh;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  padding: 5rem 1rem 0;
  overflow: hidden;
  .my_tuan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    z-index: 2;
    // background: -webkit-linear-gradient(top, #fd8701, #fd8701);
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .imgs {
      margin-top: 30%;
    }

    .my_play {
      margin-top: 7%;
      font-size: 1.5rem;
    }
    
    .number {
      margin-top: 7%;
      font-size: 2.8rem;
      font-weight: 600;
    }

    .check {
      margin-top: 7%;
      font-size: 1.4rem;
      color: var(--theme_color);
    }
     
     .button {
       width: 12rem;
       position: fixed;
       bottom: 17%;
       font-size: 1.5rem;
       background-color: var(--theme_color);
       border: 0;
     }
  }
  
}
</style>
<template>
  <div class="activityShow" :style="{ '--theme_color': theme_color }">
    <div class="my_tuan" :style="{ backgroundColor: theme_color }">
      <van-icon class="icon" name="arrow-left" @click="iconClick" />
      <span>我的余额</span>
    </div>
    <div class="container">
        <div class="imgs">
            <van-image
            width="5rem"
            height="5rem"
            :src="backgroudImg"
        />
        </div>
        
        <span class="my_play">我的余额</span>

        <span class="number">￥{{envelopeList.gifts_total || gifts_total}}</span>

        <span class="check" @click="detailsView">查看余额明细</span>

        <van-button class="button" size="small" type="primary" v-if="is_withdrawal">提现</van-button>
    </div>
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Field,
  RadioGroup,
  Radio,
  Image as VanImage,
} from "vant";
import backgroudImg from './../../../assets/img/lq.png'
// import QRCode from 'qrcode'
// import html2canvas from 'html2canvas'
// import func from 'vue-editor-bridge';
// import utils from '@/assets/js/utils.js'
export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [VanImage.name]: VanImage,
  },
  data() {
    return {
      backgroudImg: backgroudImg,
      openid: "",
      activity_id: null,
      gifts_total: null,
      envelopeList: [],
      theme_color: '',
      is_withdrawal: false
    };
  },
  created() {
    this.activity_id = this.$route.query.activity_id
    this.theme_color = this.$route.hash
    // console.log(this.$route.hash, 'this.$store.state');
    this.openid = localStorage.getItem("COPENID")
    this.is_withdrawal = this.$route.query.is_withdrawal
    this.getGiftsWithdrawal()
    // this.openid = localStorage.getItem("COPENID")
    // const Item = JSON.parse(localStorage.getItem("OrderItem"));
    // this.openid = localStorage.getItem("COPENID")
    // this.activity_id = Item.activityItem.activitys_id;
  },
  // computed: {
  //   getOpenId() {
  //     this.openid = this.$store.state.openid
  //     return this.openid
  //   }
  // },
  mounted() {},
  methods: {
    // 退回
    iconClick() {
      this.$router.go(-1);
    },
    detailsView() {
      this.$router.push(`/caseShow/money/CheckDetails?&activity_id=${this.activity_id}`)
      this.$store.commit("setThemeColor", this.theme_color);
    },
    // 获取红包佣金金额
    getGiftsWithdrawal() {
      let params = {
        activity_id: this.activity_id,
        openid: this.openid
      };
      this.$request.getGiftsWithdrawal(params).then(res => {
        this.envelopeList = res.data.data
        this.gifts_total = res.data.gifts_total
      })
    }
  },
};
</script>